import { Component } from '@angular/core';

@Component({
  selector: 'app-devtools',
  imports: [],
  templateUrl: './devtools.component.html',
  styleUrl: './devtools.component.scss'
})
export class DevtoolsComponent {
   port: chrome.runtime.Port = chrome.runtime.connect({ name: `devtools-port` });

  ngOnInit() {
    // this.createPanel();
    this.activePort();
  }

  createPanel() {
    return new Promise((resolve, reject) => {
      chrome.devtools.panels.create(
        'IAS DevTools',
        'assets/icons/error-icon.jpg',
        'devtools/index.html',
        (panel) => {
          console.log('Panel created:', panel);
          resolve(panel);
        }
      ); 
    })
       
  }

  activePort() {
    this.port.postMessage({
      action: 'start',
      data: {
        from: 'DEVTOOLS'
      }
    })

    this.port.onMessage.addListener(async (msg,port) => {
      console.log("[DEVTOOLS] 收到消息:", msg);
      if(msg.action === 'openDevTools') {
        await this.createPanel()

        port.postMessage({
          action:'createPanel',
          data: {
            status: 'success',
          }
        })
      }
    })
  }
}
